<template>
  <el-breadcrumb separator="/" class="book-breadcrumb">
    <el-breadcrumb-item
        v-for="(item, index) in validItems"
        :key="`breadcrumb-${index}`"
        :to="item.path"
        @click.prevent="handleNavigation(item, index)"
        :class="{ 'last-item': index === validItems.length - 1 }"
    >
      <span class="breadcrumb-text">{{ item.name }}</span>
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script setup>
import { computed } from 'vue';
import { useRouter } from 'vue-router';

const props = defineProps({
  items: {
    type: Array,
    default: () => [],
    validator: (value) => {
      return value.every(item => item && typeof item.name === 'string');
    }
  }
});

const router = useRouter();

const validItems = computed(() => {
  return props.items.filter(item => item?.name);
});

const handleNavigation = (item, index) => {
  if (index === validItems.value.length - 1 || !item.path) return;
  router.push(item.path);
};
</script>

<style scoped lang="scss">
.book-breadcrumb {
  :deep(.el-breadcrumb__item) {
    .breadcrumb-text {
      transition: color 0.2s ease;
    }

    &:not(.last-item) {
      .breadcrumb-text {
        color: var(--el-color-primary);
        cursor: pointer;

        &:hover {
          color: var(--el-color-primary-light-3);
          text-decoration: underline;
        }
      }
    }

    &.last-item {
      .breadcrumb-text {
        color: var(--el-text-color-regular);
        font-weight: 500;
      }
    }
  }
}
</style>